<!--
 * @Author: White
 * @description: 
 * @LastEditTime: 2021-08-17 22:07:16
-->

<template>
    <div class="rank-list">
        <!-- 官方榜：前4个歌曲榜单 + 歌手榜单 -->
        <div class="rank-wrapper">
            <div class="rank-title">官方榜</div>
            <!-- 官方榜 -->
            <div class="card-wrapper-loading"
                v-show="loading"
                v-loading="loading"
                element-loading-text="载入中..."
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(255, 255, 255)">
            </div>
            <div class="rank-item" v-for="(item, index) in ranklist" :key="index">
                <div class="rank-left">
                    <img :src="item.coverImgUrl">
                    <p class="updata">{{item.createTime}}</p>
                </div>
                <div class="rank-right">
                    <div class="rank-right-item" v-for="(ite, ind) in item.tracks" :key="ind" >
                        <div class="title">
                            <span>{{ind + 1}}</span>{{ite.first}}
                        </div>
                        <div class="author">
                            {{ite.second}}
                        </div>
                    </div>
                    <div class="more">查看更多</div>
                </div>
            </div>
            <!-- 歌手榜 -->

            <!-- 全球榜 -->
            <div class="rank-title">全球榜</div>
            <div class="card-wrapper-loading"
                v-show="loading"
                v-loading="loading"
                element-loading-text="载入中..."
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(255, 255, 255)">
            </div>
            <div class="word-rank">
                <div class="word-item" v-for="(item, index) in wordlist" :key="index">
                    <img :src="item.coverImgUrl">
                    <p class="title">{{item.name}}</p>
                    <span class="total">{{item.playCount}}</span>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>
import { reactive, defineComponent, onMounted, toRefs } from "vue";
import { getRankList } from '@/api/music'

export default defineComponent({
    setup() {
        const data = reactive({
            loading: false,
            ranklist: [],
            wordlist: []
        })
        /** 获取所有排行榜数据 */
        const getList = async () => {
            data.loading = true
            const res = await getRankList()
            if (res.data.code === 200) {
                data.ranklist = res.data.list.slice(0, 4)
                data.wordlist = res.data.list.slice(4, -1)
                data.loading = false
            }
        };

        onMounted( async() => {
            getList()
        })
        return {
            ...toRefs(data)
        }
    },
});
</script>
  
  <style lang="scss" scoped>
.rank-list {
    height: 100%;
    .rank-wrapper {
        .card-wrapper-loading {
            z-index: 9;
            top: 0px;
            :deep(.el-loading-spinner) {
                display: flex;
                align-items: center;
                justify-content: center;
            }
            :deep(.el-icon-loading) {
                color: #666;
            }
            :deep(.el-loading-text) {
                margin-left: 2px;
                color: #666;
            }
        }
        .rank-title {
            padding: 20px 0px;
            color: #333;
            font-size: 18px;
            font-weight: 700;
        }
        .rank-item {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            .rank-left {
                width: 170px;
                height: 170px;
                margin-right: 32px;
                border-radius: 8px;
                position: relative;
                img {
                    width: 100%;
                    border-radius: 10px;
                }
                .updata {
                    width: 100%;
                    text-align: center;
                    position: absolute;
                    top: 110px;
                    color: #fff;
                    font-size: 14px;
                }
            }
            .rank-right {
                width: 70%;
                .rank-right-item {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    height: 40px;
                    line-height: 40px;
                    padding: 0 10px;
                    font-size: 14px;
                    cursor: pointer;
                    &:nth-child(2n + 1) {
                        background-color: #fafafa;
                        border-radius: 4px;
                    }
                    &:hover {
                        background-color: #f5f5f5;
                    }
                    .title {
                        span {
                            color: #d33a31;
                            padding: 0 10px 0 2px;
                        }
                    }
                    .author {
                        width: 180px;
                        color: #969696;
                        text-align: right;
                    }
                }
                .more {
                    color: #666;
                    font-size: 14px;
                    cursor: pointer;
                    margin: 10px 0px 0px 10px;
                }
            }
        }
        .word-rank {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            .word-item {
                width: 140px;
                position: relative;
                img {
                    width: 100%;
                    border-radius: 8px;
                }
                .title {
                    color: #333;
                    font-size: 14px;
                    margin-top: 8px;
                    line-height: 20px;
                    margin-bottom: 10px;
                }
                .total {
                    position: absolute;
                    top: 10px;
                    right: 10px;
                    font-size: 10px;
                }
            }
        }
    }
}
</style>
  